<template>
  <page-header-wrapper>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="套餐管理">
      <div slot="extra">
        <a-radio-group v-model="status">
          <a-radio-button value="all">全部</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div>
    </a-card>
    <div>
      <s-table
        ref="table"
        :columns="columns"
        :rowKey="(record) => record.id"
        :data="loadData"
        :showPagination="false"
      >
        <span slot="action" slot-scope="text, record">
          <a
            @click="toDetail(record)"
          >
            编辑
          </a>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm
                  title="Are you sure delete this task?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="confirmDelete(record.id)"
                  @cancel="()=>{}"
                >
                  <a href="#">删除电柜</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </s-table>
    </div>
    <menu-dialog :model="detailData" :visible="detailVisible" @ok="modalOk" @cancel="() => { this.detailVisible = false }" />
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getMenuLists, deleteMenu } from '@/api/menu'
import MenuDialog from './Detail'

export default {
  name: 'MenuLists',
  components: {
    STable,
    MenuDialog
  },
  data () {
    return {
      status: 'all',
      detailVisible: false,
      detailData: null,
      columns: [
        {
          title: '套餐ID',
          dataIndex: 'id',
          customRender: (text, record, index) => index + 1
        },
        {
          title: '套餐名称',
          dataIndex: 'name'
        },
        {
          title: '套餐价格',
          dataIndex: 'price'
        },
        {
          title: '过期时间',
          dataIndex: 'expireTime',
          customRender: (text) => {
            return text
          }
        },
        {
          title: '添加时间',
          dataIndex: 'addTime',
          customRender: (time) => {
            console.log(this.timeFormat(time))
            return this.timeFormat(time)
          }
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: (paramter) => {
        return getMenuLists().then(res => {
          return {
            data: res.data
          }
        })
      }
    }
  },
  methods: {
    modalOk () {
      this.$refs.table.refresh(true)
      this.detailVisible = false
    },
    confirmDelete (id) {
      deleteMenu(id).then(res => {
        this.$refs.table.refresh(true)
        console.log(res)
      }).catch(e => {
        console.error(e)
      })
    },
    toDetail (item) {
      console.log(item)
      this.detailData = item
      this.detailVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
